<template>
  <div id="app">
    <header>
      <p>充值金额：<span class="baseColor">44731.6</span></p>
      <p>请选择充值金额</p>
    </header>
    <ul class="recharge-amount clearfix">
      <li
        v-for="(item,index) in specificationData"
        :key="`specification${index}`"
        @click="_specificationHandler(index)"
        :class="{'active':specificationIndex == index}"
      >{{item}}元
      </li>
    </ul>
    <ul class="bank">
      <li>
        <p><s></s>通道一：兴业银行</p>
        <p> (单笔限额：50000，单日限额：200000)</p>
        <i></i>
      </li>
      <li>
        <p><s></s>通道二：浦发银行</p>
        <p> (单笔限额：50000，单日限额：200000)</p>
        <i></i>
      </li>
      <li>
        <p><s></s>通道三：</p>
        <router-link to="/">立即签约</router-link>
      </li>
    </ul>
    <router-link to="/RechargeConfirm" class="btnSmall">充值</router-link>
  </div>
</template>

<script>
  import {localStorageGet} from '../../../assets/js/localStorage'
  export default {
    name: "recharge",
    data() {
      return {
        specificationData: [54731.6, 44731.6, 1731.6, 5731.6, 4731.6, 5000.1],
        specificationIndex: 0,
      };
    },
    methods: {
      _specificationHandler(index) {
        this.specificationIndex = index
      },
      _queryRecharge() {
        let params = {
          requestNo: '1111122444',
          orderNo: '122232324342',
          amt: this.amt,
          userUid: localStorageGet('userUid'),
          productName: '2018041223344',
          channelType: 'YIBAO',
          sysTag: 'ssmall'
        }
        let _this = this
        this.$http({
          url: '/bank/trade/bank/biz/bind',
          method: 'post',
          data: params,
          transformRequest: [function (data) {
            data = _this.$Qs.stringify(data);
            return data;
          }],
          headers: {'Content-Type': 'application/x-www-form-urlencoded'}
        })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          })
      },
    }
  }
</script>

<style lang="less" scoped>
  #app {
    header {
      margin: 1rem 0.5rem 0;
      p {
        font-size: 0.64rem;
        line-height: 1.5rem;
        span {
          font-size: 1rem;
        }
        &:nth-of-type(2) {
          font-size: 0.554rem;
          color: #b9b9b9;
        }
      }
    }
    .recharge-amount {
      margin: 0.5rem 0.5rem 0.8rem;
      li {
        float: left;
        width: 4.629rem;
        line-height: 2.51rem;
        text-align: center;
        color: #000;
        border-radius: 5px;
        text-align: center;
        background: #f6f6f6;
        font-size: 0.64rem;
        margin: 0 0.55rem 0.55rem 0;
        &.active {
          background: #ff9500;
          color: #fff;
        }
        &:nth-of-type(3) {
          margin-right: 0;
        }
        &:nth-of-type(6) {
          margin-right: 0;
        }
      }
    }
    .bank {
      border-top: 1px solid #e5e5e5;
      li {
        padding: 0.5rem;
        border-bottom: 1px solid #e5e5e5;
        line-height: 1.2rem;
        position: relative;
        height: 3.28rem;
        box-sizing: border-box;
        p {
          font-size: 0.64rem;
          position: relative;
          padding-left: 1.2rem;
          s {
            position: absolute;
            left: 0;
            top: 0.3rem;
            width: 0.85rem;
            height: 0.597rem;
            background: url("../../../assets/images/bank.png");
            background-size: 100%;
          }
          &:nth-of-type(2) {
            color: #8e8e93;
            font-size: 0.554rem;
            padding-left: 0;
          }
        }
        i {
          position: absolute;
          right: 0.5rem;
          top: 1.3rem;
          width: 0.8rem;
          height: 0.8rem;
          background: #f5f5f5;
          border: 1px solid #e1e1e1;
          border-radius: 100%;
          &.active {
            background: url("../../../assets/images/check-icon.png");
            background-size: 100%;
          }
        }
        &:nth-of-type(3){
          p {
            color: #b9b9b9;
            s {
              position: absolute;
              left: 0;
              top: 0.3rem;
              width: 0.85rem;
              height: 0.597rem;
              background: url("../../../assets/images/bank-gray.png");
              background-size: 100%;
            }
          }
          a {
            width: 3.15rem;
            height: 1.17rem;
            background: #ff9500;
            color: #fff;
            border-radius: 5px;
            position: absolute;
            right: 0.5rem;
            top: 1.05rem;
            font-size: 0.554rem;
            text-align: center;
          }
        }
      }
    }
    .btnSmall {
      margin: 1.49rem auto;
    }
  }
</style>
